<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_事件监听</title>
</head>
<body>
<button onclick="alert('点击了按钮1')">按钮1</button>
<button id="btn">按钮2</button>
<hr>
<h4>今天星期三</h4>
<span>震惊：最强台风来袭。。。</span>
<h4>明天星期四</h4>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad beatae commodi cupiditate exercitationem facere
        ipsum magni minima nam qui saepe. Consequuntur ea eligendi et eum nostrum. Explicabo numquam officia unde!
    </div>
    <div>Accusamus at dignissimos ducimus facilis ipsa itaque minima optio rem tempore vel. Cupiditate, doloribus sunt.
        At consectetur dolores eligendi exercitationem id laudantium, libero mollitia, obcaecati omnis quod sit ullam
        velit.
    </div>
    <div>Aut dolore dolores, eligendi excepturi expedita illum, in incidunt ipsa maiores molestias necessitatibus nemo
        nesciunt nisi pariatur possimus provident quaerat quia quidem sapiente sed sit sunt vitae voluptatem!
        Consequatur, laudantium!
    </div>
    <div>Ad ipsum omnis provident reprehenderit ut. Amet aperiam, at blanditiis corporis dolor doloremque, dolores
        facilis fuga ipsum iste maiores minus modi nemo, placeat quasi quo sed sint totam voluptate voluptatum.
    </div>
    <div>Accusamus, aut cumque dicta earum eos exercitationem fugit inventore iusto, laboriosam, minus molestias nemo
        nesciunt nihil nisi nostrum pariatur possimus provident quo quod ratione sed totam ullam ut vel voluptas!
    </div>
    <div>A aspernatur beatae dolore eveniet fuga illum, iusto laboriosam maiores molestias nam, odit provident quia
        repellendus rerum totam, velit vitae? A amet architecto asperiores, eos inventore modi nihil totam. Velit.
    </div>
    <div>Adipisci aliquam amet architecto cum debitis delectus dicta dolores doloribus ducimus eos est et,
        exercitationem facere in iusto, laboriosam laborum nulla obcaecati odio pariatur placeat quod repellendus
        reprehenderit tempore voluptatibus.
    </div>
    <div>Cumque iusto nemo quae quia vel. Commodi, doloribus iste minus odit placeat quos recusandae tempore veniam? Est
        et ex facilis mollitia quia, quidem veniam. Aut corporis debitis exercitationem quasi voluptatibus?
    </div>
    <div>Adipisci at beatae consequuntur cupiditate dolores nihil quos sunt? Dignissimos dolor inventore ipsa molestias
        sapiente. Alias, aut autem commodi eaque eos excepturi itaque, laudantium repellat, soluta suscipit temporibus
        totam voluptatem.
    </div>
    <div>Adipisci aliquid animi autem blanditiis dicta eum eveniet exercitationem impedit labore maiores molestiae
        necessitatibus nobis obcaecati placeat quisquam recusandae, repellendus sed similique suscipit temporibus ut
        veritatis voluptas. Ducimus, exercitationem, omnis!
    </div>
    <div>Accusamus aliquam, assumenda autem commodi error ex facilis in ipsum modi nesciunt perferendis perspiciatis
        porro quos recusandae, reiciendis rerum totam velit voluptas voluptates voluptatum! Incidunt minus
        necessitatibus reprehenderit sit suscipit?
    </div>
    <div>Ab deserunt, earum eos error est eum excepturi fuga hic laboriosam magnam maiores maxime minima modi nam nihil
        officia provident quisquam sequi sint soluta tempora totam vel velit voluptate voluptatibus.
    </div>
    <div>Aliquam deserunt expedita illo, illum omnis perferendis, quaerat quod, reiciendis rem suscipit unde velit?
        Atque cum dignissimos distinctio error ex ipsa itaque, iusto laborum magni omnis reiciendis sapiente unde,
        voluptatum?
    </div>
    <div>A accusamus, aliquid atque cupiditate dolore eligendi est ipsam iusto laudantium nihil obcaecati optio, quae
        quibusdam, quos rerum sit suscipit totam ullam vero voluptatem! Blanditiis minus nemo quo unde voluptates!
    </div>
    <div>Ad animi aspernatur atque commodi cum deleniti dicta dolores eligendi excepturi expedita ipsum iste iure labore
        nihil possimus praesentium quibusdam, reprehenderit, suscipit unde, veniam veritatis vitae voluptas! Doloribus,
        dolorum nisi!
    </div>
    <div>Ad, aperiam autem culpa deserunt dolore ducimus eaque eius eos, exercitationem expedita fugiat incidunt laborum
        laudantium maiores modi obcaecati placeat provident quaerat quidem quis rem saepe sequi sint, tempore
        voluptates.
    </div>
    <div>A accusantium animi aspernatur assumenda esse hic inventore ipsum, itaque magnam molestias mollitia neque
        officia optio. Commodi distinctio dolorem eaque necessitatibus qui? Dignissimos earum fugit id itaque neque
        perspiciatis repellendus?
    </div>
    <div>Amet aperiam autem delectus deleniti doloremque dolores ducimus facilis libero, magnam magni mollitia optio
        pariatur quia reprehenderit vel, voluptates voluptatibus? A aliquid deserunt hic illum magnam odit pariatur
        perferendis porro!
    </div>
    <div>Aspernatur, atque autem beatae consectetur culpa cum dignissimos dolore doloremque eius enim hic id illo libero
        nesciunt nobis non nulla, officiis perspiciatis placeat porro, possimus quas similique tempore vel voluptatibus!
    </div>
    <div>Aspernatur, dolorum et illo labore pariatur sapiente totam! Ab architecto assumenda, delectus dolorum eos
        exercitationem laudantium libero maiores maxime molestias natus officia perspiciatis quis recusandae
        reprehenderit sed, totam, ullam unde?
    </div>
    <div>Accusamus ad aperiam consectetur dicta distinctio dolores exercitationem fuga hic, ipsum minima neque nesciunt
        obcaecati, qui quis quod sit tempora veritatis! Facilis incidunt ipsum, magnam nihil quidem suscipit totam vero!
    </div>
    <div>Autem consequuntur iure iusto obcaecati quae quam quos ratione sunt vitae, voluptatibus? Adipisci deserunt
        dolor inventore ipsa optio sint sunt? Ad asperiores deleniti iste, laudantium pariatur quidem quis quos
        reiciendis.
    </div>
    <div>Deleniti dicta explicabo hic illum libero molestias neque nostrum numquam, officiis repellat repudiandae sint
        sit tempora ullam voluptas! Architecto autem consectetur doloribus inventore nobis pariatur porro quas quibusdam
        sint sunt.
    </div>
    <div>Eaque enim quibusdam reprehenderit sint! Earum, officiis totam. Doloribus eveniet impedit magni officia porro
        similique, tempore vero! Delectus doloribus ducimus est et harum laboriosam maxime nobis optio, placeat
        quisquam? Perspiciatis?
    </div>
    <div>Accusamus ad adipisci delectus, deleniti dolore doloremque eius esse eveniet excepturi facilis incidunt ipsa
        minima necessitatibus nisi nobis officiis omnis perspiciatis provident quae repudiandae sequi sit, tempora,
        veritatis vero voluptatibus.
    </div>
    <div>Aliquam aperiam consequatur cum deleniti ducimus enim esse, eum expedita explicabo fugit incidunt, ipsa iusto
        laborum minus neque, obcaecati officiis pariatur possimus provident quae quia quidem quo recusandae sapiente
        sed!
    </div>
    <div>Corporis delectus dolore molestiae nemo nobis odit optio suscipit! Atque deleniti pariatur quod veritatis.
        Asperiores, consequatur inventore iste magnam modi tenetur totam. Cupiditate, nam nesciunt quae quas quidem
        repellat ullam.
    </div>
    <div>Aperiam, beatae cumque dolore doloremque facilis libero minus nam nisi odio odit perspiciatis quasi quis quo
        recusandae rem tempore unde voluptate! Illo minus reprehenderit voluptatem voluptates. Aliquid praesentium
        provident quae?
    </div>
    <div>Amet at culpa cum doloremque exercitationem fugiat fugit harum incidunt ipsum iusto modi mollitia nesciunt odio
        odit officia officiis omnis pariatur perferendis, porro quam quos reprehenderit similique vel velit vitae.
    </div>
    <div>Cumque deleniti dicta dignissimos doloremque earum eum fugiat necessitatibus omnis quibusdam soluta? Aspernatur
        blanditiis deleniti eaque earum ex fugiat itaque minus molestias natus necessitatibus nemo nesciunt
        perspiciatis, quasi quia sed.
    </div>
    <div>Accusantium asperiores, distinctio, doloremque hic ipsa iure magnam nostrum nulla quaerat quam repellendus
        temporibus unde voluptates. Ab debitis dolorem ex nihil nostrum quae, quidem, reiciendis repellat reprehenderit
        rerum unde vel.
    </div>
    <div>Aliquam excepturi, id laborum maxime perferendis placeat repudiandae sit. Cum, eveniet, qui. Aliquid amet animi
        aut dolorem enim facere officiis rem sed? Beatae dicta expedita optio quaerat quasi, quos saepe!
    </div>
    <div>Ad architecto, asperiores culpa dignissimos dolorem ea esse, eum ex fugit harum illo libero natus neque nisi,
        obcaecati odit officiis praesentium quia quibusdam quidem quod sed tenetur ullam unde veritatis.
    </div>
    <div>Accusamus, adipisci amet animi debitis ducimus exercitationem fuga incidunt iste laboriosam laudantium nam
        nihil obcaecati, perferendis praesentium quia! Accusamus animi, debitis dolorem doloribus expedita numquam
        obcaecati quae reiciendis rem tempore.
    </div>
    <div>Ad aliquam aspernatur at, cumque eos fugiat harum illum incidunt perspiciatis, quas quidem ratione rerum sunt
        vero voluptas voluptates voluptatibus! Amet aut consectetur, consequuntur eaque explicabo facere praesentium quo
        recusandae.
    </div>
    <div>Debitis eum ipsa odit tenetur unde. Assumenda autem debitis eum expedita hic, in ipsum maxime modi, obcaecati
        perspiciatis quo rem tempore tenetur ullam ut veritatis vero, voluptatum! Adipisci, nisi officiis.
    </div>
    <div>A accusantium ad consequuntur cumque delectus deserunt doloremque, ducimus ea eaque earum est harum hic illo
        illum incidunt minima natus neque officiis omnis porro possimus quaerat repellat repudiandae temporibus totam?
    </div>
    <div>Architecto, consectetur deleniti ducimus esse, itaque laboriosam laborum modi molestiae natus nemo, omnis quia
        repellendus soluta. Beatae eius harum officia ut? Accusamus officia placeat quasi quibusdam similique sit,
        temporibus ut?
    </div>
    <div>Accusantium aliquid consectetur culpa deleniti deserunt doloremque eveniet ex fugit id, nobis odio quae quam
        quidem quod repudiandae rerum sit tenetur velit? Alias assumenda ipsam omnis rem sapiente unde voluptates?
    </div>
    <div>Aut error fugit ipsa maxime quasi quidem sed, similique veniam voluptates. Ad amet animi commodi culpa hic iste
        nesciunt non officia officiis, quis quod, repellendus reprehenderit vitae? Adipisci, consequuntur, soluta!
    </div>
    <div>Aperiam commodi culpa cumque eligendi excepturi in incidunt, magni modi necessitatibus perferendis, provident
        quidem ratione recusandae reiciendis tempora vel voluptas! Debitis esse harum ipsam natus optio perferendis
        totam voluptate? Laboriosam.
    </div>
    <div>Corporis cupiditate dignissimos doloremque est ipsa molestiae quis rem sed, voluptas. Beatae, distinctio
        doloremque eos ipsam magnam molestias necessitatibus nesciunt quia recusandae sapiente sed sint, veniam
        voluptates. Deleniti, doloribus ratione.
    </div>
    <div>Aliquid animi aut beatae consectetur consequatur doloribus eum ex incidunt, laudantium magni molestias mollitia
        nemo, neque nobis perferendis quae quibusdam, rerum sit temporibus ullam. Ea facere id inventore possimus
        voluptatem.
    </div>
    <div>Ab accusamus accusantium ad alias aliquam cum dolor excepturi fuga ipsum, iusto laudantium libero nisi
        perspiciatis porro quia recusandae repudiandae rerum sequi similique sint vero, voluptate voluptatem?
        Architecto, culpa omnis!
    </div>
    <div>Assumenda, aut commodi corporis culpa cum debitis deserunt dignissimos earum fuga, ipsam maxime minima minus
        non nulla officia placeat quae qui quia quis quos ratione rerum sequi tempora unde vel!
    </div>
    <div>Accusamus alias aliquid aut deserunt dolorem eos est illo ipsam iste labore molestiae mollitia natus nemo
        numquam odio, quas ratione similique soluta tempora voluptatibus. Adipisci cupiditate dolorem maxime numquam
        possimus!
    </div>
    <div>Accusamus alias amet animi at, culpa cupiditate distinctio dolore doloribus ea eos esse fugiat id ipsa laborum
        libero magnam modi nam quaerat, quidem recusandae repudiandae, rerum saepe temporibus ullam vero?
    </div>
    <div>A autem consequuntur deserunt, earum eius esse et eum incidunt magni nemo nostrum obcaecati perspiciatis
        praesentium quos recusandae saepe voluptas? Dolores ducimus excepturi pariatur quaerat quas. Deserunt ipsum
        libero repudiandae.
    </div>
    <div>Ad, alias aperiam assumenda cumque debitis, earum eos excepturi illo ipsam iure minima necessitatibus nostrum
        nulla qui repudiandae tempore totam unde, voluptatum? Distinctio nisi quaerat quos sint temporibus ullam,
        veniam.
    </div>
    <div>Nulla officia qui suscipit. Ad adipisci aliquam animi aperiam cupiditate dolor dolores dolorum explicabo
        facilis fugiat ipsa itaque modi odit, perferendis praesentium quae qui saepe sequi soluta tempore veritatis
        vitae!
    </div></div>
<script>
    window.addEventListener('scroll',function (){
        console.log('页面被滚动了');
    })
    window.addEventListener('resize',function (){
        console.log('页面被调整了');
    })
    let spanE = document.querySelector('span');
    spanE.addEventListener('mouseover',function (){
        console.log('标题被查看了');
    })
    let btnE = document.getElementById('btn');
    btnE.addEventListener('click',function (){
        alert('点击了按钮2');
    })
</script>
</body>
</html>